(function (window) {
	'use strict';

	// Your starting point. Enjoy the ride!

	// alert('我最帅！')

	/*
		todoMvc的功能需求：
			* 1.渲染数据到任务列表 ok
			* 2.输入内容回车创建任务 ok
			* 3.点击复选框可以：完成任务 ok
			* 4.全选、不选和反选 ok 难点
			* 5.双击编辑任务项 ok
			* 6.删除任务 ok
			* 7.统计未完成的条数
			* 8.切换状态：数据进行切换（路由）
			* 9.清除所有的已完成任务
			* 10.数据本地存储
	*/

	//本地存储
	//存数据：
	// localStorage.setItem('data', '顺德彭于晏');
	//取数据：
	// let name = localStorage.getItem('data');
	// console.log(name, '666');

	// let taskList = [{ //3.准备任务列表
	// 	id: 1,
	// 	isDone: true,
	// 	title: '今天吃番茄炒蛋'
	// }, {
	// 	id: 2,
	// 	isDone: false,
	// 	title: '今天租房'
	// }, {
	// 	id: 3,
	// 	isDone: false,
	// 	title: '今天申请还款'
	// }, {
	// 	id: 4,
	// 	isDone: false,
	// 	title: '红豆双皮奶-顺德老店'
	// }];
	// localStorage.setItem('mytask', JSON.stringify(taskList));

	//取数据-json数据

	// let str = localStorage.getItem('mytask');
	// console.log(str)
	// let arr = JSON.parse(str);
	// console.log(arr);

	//封装一个方法，能够进行数据的存储
	let storage = {
		getdata() {
			let str = localStorage.getItem('mytask');
			if (str) {
				let arr = JSON.parse(str);
				return arr;
			} else {
				let arr = [{ //3.准备任务列表
					id: 1,
					isDone: true,
					title: '今天吃番茄炒蛋'
				}, {
					id: 2,
					isDone: false,
					title: '今天租房'
				}, {
					id: 3,
					isDone: false,
					title: '今天申请还款'
				}]
				return arr;
			}
		},
		setdata(data) {
			//存数据
			localStorage.setItem('mytask', JSON.stringify(data));
		}
	}



	let vm = new Vue({
		el: '#app',
		data: {
			taskList: storage.getdata(),
			content: '',
			currenIndex: null,
			hash: ''
		},
		methods: {
			//点击删除按钮删除某一行
			del(index) {
				// alert('点击了删除按钮:' + index)
				//删除功能应该做一个提示,提醒用户,是否真的需要删除
				let ok = confirm('您确定要删除吗?')
				if (ok) {
					this.taskList.splice(index, 1); //删除数组的第index条数据
				}

			},
			//按下回车键,就提交一条新的内容
			addTask() {

				//防止输入空字符，没有内容不允许新增一行
				let str = this.content.trim(); //trim()去掉前后空格  aa vv

				if (str) {
					// alert('按下键盘了')
					let newTask = {
						id: this.taskList.length + 1,
						isDone: false,
						title: this.content
					}
					//准备好新的数据后,就插入到新数组里面
					this.taskList.push(newTask); //插入新数据到后面
					this.content = '';
				}
			},
			edit(index) { //难点
				//双击的时候调用这个方法
				this.currenIndex = index;
			},
			keepItem(index) {
				console.log(index)
				if (this.taskList[index].title.trim()) {
					//不为空
					this.currenIndex = null;
				} else {
					//为空：不用保留这一行了
					this.taskList.splice(index, 1);
					this.currenIndex = null;
				}
			},
			//点击删除全部已完成
			delAll() {
				let ok = confirm('您确定要删除吗?')
				if (ok) {
					this.taskList = this.taskList.filter(item => item.isDone == false)
				}

			}
		},
		//计算属性
		computed: {
			checkall: {
				set(val) {
					//全选，全不选：老大控制小弟
					console.log(val, '全选的状态')
					this.taskList.forEach(item => {
						item.isDone = val;
					})
				},
				get() {
					//反选：小弟控制老大
					return this.taskList.every(item => item.isDone == true);
				}
			},
			//统计未完成的条数
			total() {
				return this.taskList.filter(item => item.isDone == false).length;
			},
			//用刚才获取到的哈希值做判断，过滤出相应的数据
			taskFilter() {
				switch (this.hash) {
					case 'all':
						return this.taskList;
						break;
					case 'active':
						return this.taskList.filter(item => item.isDone == false)
						break;
					case 'completed':
						return this.taskList.filter(item => item.isDone == true)
						break
				}
			}
		},
		//局部指令注册
		directives: {
			'focus': {
				inserted(el) {
					el.focus(); //页面渲染成功就自动聚焦
				}
			},
			'focus2': {
				update(el) {
					el.focus();
				}
			}
		},
		//监听器
		watch: {
			taskList: {
				deep: true,
				handler(newval) {
					console.log('你变了', newval);
					//只要数据有变化都存一次到本地存储中
					storage.setdata(newval);
				}
			}
		}
	})

	// 8.切换状态：数据进行切换（路由）
	window.onhashchange = function () {
		//哈希值改变就触发这一段代码
		let hash = location.hash.slice(2); // abcd => cd
		console.log(hash, '这是哈希值')
		vm.hash = hash;
	}

	window.onhashchange(); //进入页面就立即执行上面的代码

})(window);